<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Move Animations</title>
    <style>
     .slide-fade-enter-active {
        transition: all .3s ease;
      }
      .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
      }
      .slide-fade-enter, .slide-fade-leave-to {
        transform: translateX(10px);
        opacity: 0;
      }

    </style>
    <script src="https://cdn.jsdelivr.net/lodash/4.3.0/lodash.min.js"></script>
    <!-- Delete ".min" for console warnings in development -->
    <script src="../../dist/vue.min.js"></script>
  </head>
  <body>

    <div id="el">
      <button @click="show = !show">
        Toggle render
      </button>
      <transition name="slide-fade" @delay-leave="handleDelay">
        <p v-if="show">hello</p>
      </transition>
    </div>
  

    <script>
      var items = [1, 2, 3, 4, 5]
      var id = items.length + 1

      var vm = new Vue({
        el: '#el',
        data: {
          show: true
        },
        components: {
          item: {
            props: ['msg'],
            template: `<div>{{ msg }} <button @click="$emit('rm')">x</button></div>`
          }
        },
        methods: {
          handleDelay (done, e) {
            console.log('213123')
            setTimeout(() => {
              console.log('done', done, e)
              done()
            }, 2000)
          }
        }
      })
    </script>
  </body>
</html>
